import { useService } from "@/lib/Service";
import DPlayer from "dplayer";
import { useEffect, useMemo, useRef } from "react";

interface IVideoProps {
    videoId: string;
    width?: string|number;
    height?: string|number;
};
const Video = ({width, height, videoId}: IVideoProps) => {
    const playerRef = useRef<HTMLDivElement>(null);
    const player = useRef<DPlayer>();
    const service = useService();
    const videoStyle = useMemo(() =>({
        width,
        height
    }), [width, height]);
    useEffect(() => {
        if(playerRef.current) {
            player.current = new DPlayer({
                container: playerRef.current,
                video: {
                    url: service.getUrl("resource.mediaUrl") + "/" + videoId
                }
            });
            player.current.play();
            return () => {
                player.current?.destroy();
            };
        }
    }, [playerRef]);
    return (<section ref={playerRef} style={videoStyle} className="dplayer">

    </section>)
};

export default Video;
